<template>
  <div class="register">
    <topBar></topBar>
    <el-row>
      <el-col :span="12" :offset="6">
        <div>
          <el-card class="box-card">
            <div class="head">
              <b>用户注册</b>
            </div>
            <span class="notes">欢迎来到我们网站，如果您是新用户，请填写下面的表进行注册。如果您已经是本站的会员，请您直接登录。</span>
            <el-tabs>
              <!--<el-tab-pane label="Email注册">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
                  <el-form-item label="姓名" prop="name" style="padding-left:42px;font-weight:bold">
                    <el-input v-model="ruleForm.name" autocomplete="off" placeholder="姓名"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱地址" prop="email" style="padding-left:40px;font-weight:bold">
                    <el-input v-model="ruleForm.email" autocomplete="off" placeholder="邮箱地址"></el-input>
                  </el-form-item>
                  <el-form-item label="输入密码" prop="inputPassword" style="padding-left:40px;font-weight:bold">
                    <el-input type="password" v-model="ruleForm.inputPassword" placeholder="输入密码"></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="enterPassword" style="padding-left:40px;font-weight:bold">
                    <el-input type="password" v-model="ruleForm.enterPassword" placeholder="确认密码"></el-input>
                  </el-form-item>
                  <el-form-item label="订阅邮件" style="padding-left:40px;font-weight:bold" :rules="[{required: true}]">
                    <label>
                      <input name="yes" type="radio"/>是
                    </label>&nbsp;&nbsp;&nbsp;
                    <label>
                      <input name="no" type="radio"/>否
                    </label>
                  </el-form-item>
                  <el-form-item label>
                    <label style="padding-left:40px">
                      <input name="agree" type="checkbox" style="padding-left:80px"/> 我已阅读并同意
                      <a
                        href="http://theme.opencartdemo.cn/smart-3200-free/index.php?route=information/information/agree&information_id=3"
                      >隐私政策</a>
                    </label>
                  </el-form-item>
                  <span style="padding-left:120px">
                    <el-button type="danger" @click="submitForm('ruleForm')">继续</el-button>
                  </span>
                </el-form>
              </el-tab-pane>-->
              <el-tab-pane label="手机号注册">
                <el-form :model="ruleForm" status-icon :rules="ruleForm" ref="ruleForm" label-width="100px">
                  <el-form-item label="姓名" prop="name" style="padding-left:42px;font-weight:bold;">
                    <el-input v-model="ruleForm.name" placeholder="姓名"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话" prop="telephone" style="padding-left:40px;font-weight:bold">
                    <el-input type="tel" v-model="ruleForm.telephone" placeholder="联系电话"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email" style="padding-left:40px;font-weight:bold">
                    <el-input type="email" v-model="ruleForm.email" placeholder="邮箱"></el-input>
                  </el-form-item>
                  <el-form-item label="输入密码" prop="inputPassword" style="padding-left:40px;font-weight:bold">
                    <el-input type="password" v-model="ruleForm.inputPassword" placeholder="输入密码"></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="enterPassword" style="padding-left:40px;font-weight:bold">
                    <el-input type="password" v-model="ruleForm.enterPassword" placeholder="确认密码"></el-input>
                  </el-form-item>
                  <!--<el-form-item label="订阅邮件" style="padding-left:40px;font-weight:bold">
                    <label>
                      <input name="yes" type="radio"/>是
                    </label>&nbsp;&nbsp;&nbsp;
                    <label>
                      <input name="no" type="radio"/>否
                    </label>
                  </el-form-item>-->
                  <!--<el-form-item label>
                    <label style="padding-left:40px">
                      <input name="agree" type="checkbox" style="padding-left:100px"/> 我已阅读并同意
                      <a
                        href="http://theme.opencartdemo.cn/smart-3200-free/index.php?route=information/information/agree&information_id=3"
                      >隐私政策</a>
                    </label>
                  </el-form-item>-->
                  <span style="margin-left:120px">
                    <el-button type="danger" @click="submitForm('ruleForm')">注册</el-button>
                  </span>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
      </el-col>
     <!-- <el-col :span="3" :offset="1">
        <div>
          <el-card class="box-card2">
            <div slot="header" class="clearfix">
              <span>会员中心</span><br/>
            </div>
            <div class="list">
              <p style="padding: 0px 5px 15px 1px;"><a href='' style="text-decoration: none;color:#909399">会员登录</a><br/>
              </p>
              <p style="padding: 0px 5px 15px 1px;"><a href='' style="text-decoration: none;color:#909399">会员注册</a><br/>
              </p>
              <p style="padding: 0px 5px 15px 1px;"><a href='' style="text-decoration: none;color:#909399">忘记密码</a><br/>
              </p>
              <p style="padding: 0px 5px 15px 1px;"><a href='' style="text-decoration: none;color:#909399">我的账户</a><br/>
              </p>
              <p style="padding: 0px 5px 15px 1px;"><a href='' style="text-decoration: none;color:#909399">地址管理</a><br/>
              </p>
              <p style="padding: 0px 5px 15px 1px;"><a href='' style="text-decoration: none;color:#909399">收藏列表</a><br/>
              </p>
              <p style="padding: 0px 5px 15px 1px;"><a href='' style="text-decoration: none;color:#909399">文件下载</a><br/>
              </p>
              <p style="padding: 0px 5px 15px 1px;"><a href='' style="text-decoration: none;color:#909399">我的积分</a><br/>
              </p>
              <p style="padding: 0px 5px 15px 1px;"><a href='' style="text-decoration: none;color:#909399">商品退还</a><br/>
              </p>
              <p style="padding: 0px 5px 15px 1px;"><a href='' style="text-decoration: none;color:#909399">我的余额</a><br/>
              </p>
              <p style="padding: 0px 5px 15px 1px;"><a href='' style="text-decoration: none;color:#909399">邮件订阅</a><br/>
              </p>
            </div>

          </el-card>
        </div>
      </el-col>-->
    </el-row>

    <style></style>
  </div>
</template>
<script>
  import topBar from '~/components/topBar.vue'
  import * as LoginRequest from '../../assets/login/login'
  export default {
    components:{
      topBar
    },
    data() {
      let Name=(rule, value, callback)=> {
        if (!value) {
            return callback(new Error('姓名不能为空'));
          }
      };
      let Email=(rule, value, callback)=> {
        if (!value) {
            return callback(new Error('邮箱不能为空'));
          }
      };
      let checkTel = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('手机号不能为空'));
          }
          /*setTimeout(() => {
            if (!Number.isInteger(value)) {
              callback(new Error('请输入数字值'));
            }
          }, 1000);*/
        };
      let validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.ruleForm.enterPassword !== '') {
              this.$refs.ruleForm.validateField('enterPassword');
            }
            callback();
          }
        };
      let validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.ruleForm.inputPassword) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
      return {
        ruleForm: {
          name: "",
          email: '',
          telephone: "",
          inputPassword: "",
          enterPassword: ""
        },
        rules: {
          name: [{
            validator: Name, trigger: 'blur'
          }],
          email: [{
            validator: Email, trigger: 'blur'
          }],
          inputPassword: [
            {validator: validatePass, trigger: 'blur'}
          ],
          enterPassword: [
            {validator: validatePass2, trigger: 'blur'}
          ],
          telephone: [
            {validator: checkTel, trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {       //检查是否拿到了正确的需要验证的form。查看绑定的元素是否写对
          if (valid) {
            LoginRequest.register(this)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="less">
  .register {
    margin-bottom: 20px;
    .box-card {
      text-align: left;
      width: 830px;
    }

    .head {
      text-align: left;
      font-size: 23px;
      padding-bottom: 15px;
    }

    .notes {
      font-size: 14px;
      margin-bottom: 100px;
    }

    .button {
      padding-left: 80px;
    }

    .box-card2 {

      text-align: left;
    }

    .clearfix {
      padding: 0px 0;
    }

    .list {
      color: #E6A23C;
    }

    .el-input__inner:hover {
      border-color: red
    }
  }
</style>
